//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent,Fragment } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Button,
	Modal,
  Table,
} from 'antd';
import html2pdf from 'html2pdf.js';
import printJS from 'print-js';
import styles from './ProUserList.less';
import memberApprove from '@/assets/member_approve.png';
import memberApprove2 from '@/assets/member_approve2.png';
import memberApprove3 from '@/assets/member_approve3.png';
import memberApprove4 from '@/assets/member_approve4.png';
import memberApprove5 from '@/assets/member_approve5.png';
import memberApprove6 from '@/assets/member_approve6.png';
import memberApprove7 from '@/assets/member_approve7.png';

const FormItem = Form.Item;
const { Option } = Select;


//查看审批表
class ViewForm extends PureComponent {
	static defaultProps = {
		handleViewModalVisible: () => {},
		values: {},
	};

	constructor(props) {
		super(props);

		this.state = {
        modalVisibleByMemberApprove: false
		};

	}


  columnsBySave = [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
        },  {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
        }, 	{
          title: '拟变动警衔',
          dataIndex: 'police_rank',
          key: 'police_rank',
        },  {
          title: '存档时间',
          dataIndex: 'save_time',
          key: 'save_time',
        },  {
          title: '存档人',
          dataIndex: 'save_person',
          key: 'save_person',
        },{
          title: '操作',
          fixed:'right',
          align: 'center',
          width: 160,
          render: (text, record) => {
              return (
                <Fragment>
                  <a onClick={() => this.handleModalByMemberApprove(true)}>查看审批表</a>
                </Fragment>
              );
          }
        }
  ];

  handleModalByMemberApprove = flag => {
  	this.setState({
  		modalVisibleByMemberApprove: !!flag,
  	});
  };

  exportPdf = () => {
  	// 要导出的dom节点，注意如果使用class控制样式，一定css规则
      const element = document.getElementById('doc');
      // 导出配置
      const opt = {
        margin: 1,
        filename: '警衔审批表_陈某_20200508134024',
        image: { type: 'jpeg', quality: 0.98 }, // 导出的图片质量和格式
        html2canvas: { scale: 2, useCORS: true }, // useCORS很重要，解决文档中图片跨域问题
        jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' },
      };
      if (element) {
        html2pdf().set(opt).from(element).save(); // 导出
      }
  };

  //打印
  print = () => {
    printJS({
      printable: 'print',
      type: 'html'
    });
  }

	render() {
		const {
			viewModalVisible,
			handleViewModalVisible,
		} = this.props;
		const {
			modalVisibleByMemberApprove
		} = this.state;

    const dataBySave = [
      {
        key: '1',
        index: '1',
        name: '陈某',
        police_rank: '一级警督',
        save_time: '2019-08-09',
        save_person: '王某'
      },
    ];

		return(
    <div>
    <Modal
    width={900}
    centered
    destroyOnClose
    title="审批表"
    visible={modalVisibleByMemberApprove}
    onCancel={()=> this.handleModalByMemberApprove()}
    footer={<Button key="back" onClick = { () => this.handleModalByMemberApprove(false) }>取消</Button>}
    >
    <div style={{width: '100%',height: '520px',overflow: 'auto',textAlign: 'center',position: 'relative'}}>
      <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.print}>
      打印
      </Button>
      <Button id="doc" type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.exportPdf}>
      导出
      </Button>
      <span id="print">
          <img alt="" src={memberApprove} style={{width: '100%',marginTop: '10px'}}/>
          <img alt="" src={memberApprove2} style={{width: '100%'}}/>
          <img alt="" src={memberApprove3} style={{width: '100%'}}/>
          <img alt="" src={memberApprove4} style={{width: '100%'}}/>
          <img alt="" src={memberApprove5} style={{width: '100%'}}/>
          <img alt="" src={memberApprove6} style={{width: '100%'}}/>
          <img alt="" src={memberApprove7} style={{width: '100%'}}/>
      </span>
    </div>
    </Modal>
			<Modal
    width={800}
    centered
    bodyStyle={{ padding: '20px 40px 20px' }}
    destroyOnClose
    title="警衔存档列表"
    visible={viewModalVisible}
    onCancel={() => handleViewModalVisible(false)}
    footer={<Button key="back" onClick = { () => handleViewModalVisible(false) }>取消</Button>}
>
    <Table columns={this.columnsBySave} dataSource={dataBySave}/>
</Modal>
</div>
		);
	}

}

export default ViewForm;
